<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>应用</title>
<link rel="stylesheet" type="text/css" href="/frontend/css/global.css"/>
<link rel="stylesheet" type="text/css" href="/frontend/css/app.css"/>
<link rel="stylesheet" type="text/css" href="/frontend/css/jet/jet.ui.css"/>
<!--<script type="text/javascript" src="/frontend/js/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	console.log($('#form_current').serializeArray());
});
</script>-->
</head>
<body>
<div id="wrapper">
	<div class="tab">
		<ul>
			<li id="tab_current"><a href="javascript:void(0);">未结记账</a></li>
			<li id="tab_history"><a href="javascript:void(0);">已结账单</a></li>
			<li id="tab_member"><a href="javascript:void(0);">账单组成员</a></li>			
		</ul>
		<div class="A_tip" style="display:none;">
			<img src="/frontend/image/tick.jpg" />
			<span id="tip_span"></span>
		</div>
		<div class="group_switch">
			<a href="javascript:app.group.manageGroup();"><b>管理分组</b></a>&nbsp;&nbsp;
			<select id="sel_group">
			<?php foreach($this->groupList as $row){?>
				<option value="<?php echo $row['g_id']?>" <?php if($row['g_id']==$this->defaultID) echo 'selected';?>>
					<?php echo $row['g_name']?>
				</option>
			<?php }?>
			</select>			
		</div>
		<div class="clear"></div>
	</div>
	
	<div id="current">
		<div class="bar">
		<form id="form_current">
			<!--<label>关键字：</label>
			<em><input type="text" value="" class="search-text" id="keyword" name="keyword" /></em>
			<em><a onclick="return false;" href="javascript:void();" class="button-grey"><span>搜索</span></a></em>-->
			<em class="bar-button">
				<a onclick="return false;" href="javascript:void(0);" class="button-blue"><span>结账</span></a>
			</em>
			<em class="bar-button">
				<a href="javascript:app.current.billing();" class="button-green"><span>记账</span></a>
			</em>
			<div class="clear"></div>
		</form>
		</div>
		<br/>
		<div class="box">
			<div class="box-title">我的汇总</div>
			<div class="box-content">
				<dl class="info-detail">
					<dt>当前支出：</dt>
					<dd id="my_summary_pay">0.00</dd>
					<dt>当前消费：</dt>
					<dd id="my_summary_spend">0.00</dd>
					<dt>差 额：</dt>
					<dd id="my_summary_balance">0.00</dd>
				</dl>
				<div class="clear"></div>
			</div>
		</div>
		<br/>
		<table class="data-table">
			<thead>
				<tr>
					<th>时间</th><th>备注</th><th>总金额</th><th>记录者</th><th>操作</th>
				</tr>
			</thead>
			<tbody id="data_current"></tbody>
		</table>
		<div id="page_current" class="pages"></div>
	</div>
	
	<div id="history" style="display:none;">
		<div class="bar">
			<label>关键字：</label>
			<em><input type="text" value="" class="search-text" id="keyword" name="keyword" /></em>
			<em><a onclick="return false;" href="javascript:void();" class="button-grey"><span>搜索</span></a></em>
			<em><a onclick="return false;" href="javascript:void(0);" class="button-green"><span>加关注</span></a></em>
		</div>
		<br/>
		<table class="data-table">
			<thead>
				<tr>
					<th>结账时间</th><th>总金额</th><th>操作</th>
				</tr>
			</thead>
			<tbody id="data_history"></tbody>
		</table>
		<div id="page_history" class="pages"></div>
		<div class="clear"></div>
	</div>
	
	<div id="member" style="display:none;">
		<div class="members">
			<ul id="ul_member"></ul>
			<div class="clear"></div>
			<div id="add_button" class="members_add"></div>
			<div class="clear"></div>
		</div>
	</div>	
</div>

<!-- 记账表单 -->
<div id="billing_dialog" class="dialog-billing">
	<form id="billing_form">
	<input type="hidden" name="checkout_id" value="1" />
	<table class="data-table">
		<thead>
			<tr>
				<th>参与者</th><th>支出金额</th><th>消费金额</th>
				<th><a href="#">添加</a></th>
			</tr>
		</thead>
		<tbody id="billing_user_data"></tbody>
	</table>
	<div class="form-item">
		<div class="form-item-left" style="width:15%;">记账备注：</div>
		<div class="form-item-right">
			<input type="text" name="bill_note" class="input-text" size="75" value="" />
		</div>
	</div>
	<div class="form-button">
		<div id="bill_form_error"></div>
		<a href="javascript:app.current.addBill();" class="button-green"><span>提交</span></a>
		<a href="javascript:Jet().ui.closeDialog('billing_dialog');" class="button-grey"><span>关闭</span></a>
	</div>
	</form>
</div>

<!-- 记账详细 -->
<div id="bill_items" style="display:none;">
	<!--<div style="border: 1px solid #D8E0E4;padding:5px 0;">
		<div class="bill-item">
			<div class="bill-item-left">时间：</div>
			<div class="bill-item-right">2011-11-25 00:01:40</div>
		</div>
		<div class="bill-item">
			<div class="bill-item-left">记录者：</div>
			<div class="bill-item-right" style="width:25%;">IAMSolar</div>
			<div class="bill-item-left">总金额：</div>
			<div class="bill-item-right">8.9</div>		
		</div>
		<div class="bill-item">
			<div class="bill-item-left">备注：</div>
			<div class="bill-item-right">第三条记账</div>
		</div>
	</div>-->
	<table class="data-table">
		<thead>
			<tr>
				<th>用户名</th><th>支出金额</th><th>消费金额</th>
			</tr>
		</thead>
		<tbody id="bill_items_data"></tbody>
	</table>
</div>

<!-- 添加账单组成员 -->
<div id="member_selector" style="padding:10px; display:none;">
	<div class="tab">
		<ul>
			<li id="tab_bilateral"><a href="javascript:void(0);">互相关注</a></li>
			<!--<li id="tab_search_user"><a href="javascript:void(0);">搜索用户</a></li>-->	
		</ul>
		<div class="clear"></div>
	</div>
	<!-- 互相关注 -->
	<div id="bilateral">
		<div class="members">
			<ul id="bilateral_data"></ul>
			<div class="clear"></div>
		</div>
		<div id="page_bilateral" class="pages"></div>
	</div>
	<!-- 搜索 -->
	<!--<div id="search_user" class="members" style="display:none;">		
		<div class="bar">
			<b>昵称：</b>
			<em><input type="text" class="input-text" id="search_user_input" value="" /></em>
			<em><a href="javascript:void();" class="button-grey"><span>搜索</span></a></em>
		</div>
		<div class="members">
			<ul id="search_user_data"></ul>
			<div class="clear"></div>
		</div>		
	</div>
	<div id="temp_user" style="display:none;">		
	</div>-->	
</div>


<!-- 账单组管理 -->
<div id="group_manage" class="group-manage">
	<div class="group-add">
		<a href="javascript:app.group.addGroup();" class="button-blue"><span>添加账单组</span></a>
	</div>
	<table class="data-table">
		<thead>
			<tr>
				<th>账单组名称</th><th>成员数</th><th>创建者</th><th>是否当前小组</th><th>操作</th>
			</tr>
		</thead>
		<tbody id="data_group"></tbody>
	</table>
</div>
<div id="group_edit" class="group-edit">
	<form id="group_form">
	<div id="group_form_error" class="form-error"></div>
	<input type="hidden" name="group_id" value="" />
	<div class="form-item">
		<div class="form-item-left">组名：</div>
		<div class="form-item-right">
			<input type="text" name="group_name" class="input-text" size="24" value="" />
		</div>
	</div>
	<div class="form-button">
		<a href="javascript:app.group.submitGroup('submit');" class="button-blue"><span>确定</span></a>
		<a href="javascript:Jet().ui.closeDialog('group_edit');" class="button-grey"><span>关闭</span></a>
	</div>
	</form>
</div>


<!-- jet -->
<script type="text/javascript" src="/frontend/js/jet/jet.core.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.common.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.browser.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.array.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.string.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.dom.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.event.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.http.js"></script>
<script type="text/javascript" src="/frontend/js/jet/jet.ui.js"></script>
<!-- app -->
<script type="text/javascript" src="/frontend/js/app/tool.js"></script>
<script type="text/javascript" src="/frontend/js/app/app.group.js"></script>
<script type="text/javascript" src="/frontend/js/app/app.current.js"></script>
<script type="text/javascript" src="/frontend/js/app/app.history.js"></script>
<script type="text/javascript" src="/frontend/js/app/app.member.js"></script>
<script type="text/javascript" src="/frontend/js/app/app.js"></script>
</body>
</html>
